<template>
    <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="教室名称" prop="">
            <el-input v-model="AddLaboratory.name"></el-input>
        </el-form-item>
        <el-form-item label="教室号" prop="">
            <el-input v-model="AddLaboratory.number"></el-input>
        </el-form-item>

        <el-form-item label="选择楼栋" prop="">
            <el-dropdown  split-button type="primary">
                当前楼栋：{{myCurrentBuilding}}
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="(item, index) in BuildingData" :key="index" @click="changeBuilding(item.id,item.name)">{{ item.name }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
                </el-dropdown>

                <el-dropdown  split-button type="primary">
                当前楼层：{{myCurrentFloor}}
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="(item, index) in tableData" :key="index" @click="changeFloor(item.id,item.name)">{{ item.name }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-form-item>
        

        <!--#region 实验室管理员列表 -->
        <div class="tableBox">
            <el-table :data="filterTableData" height="100%" style="width: 100%"
            highlight-current-row
            :current-row-key="AddLaboratory.userId">
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="number" label="工号"  width="140"></el-table-column>
                <el-table-column prop="phone" label="电话"  width="140"></el-table-column>
                
                <el-table-column prop="academician" label="学院"  width="180"></el-table-column>
                <!-- 按钮 -->
                <el-table-column fixed="right" label="操作" width="330">
                    <template #default="scope">
                        <el-button round type="primary" size="small"
                            @click="ClickEdit(scope.$index, scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        

        <div style="text-align: center;margin-top: 20px;">
            <el-button style="margin-right: 50px;" @click="myclose()">取消</el-button>
            <el-button type="primary" @click="SubmitForm()">确定</el-button>
        </div>
    </el-form>
</template>

<script setup>
import service from '@/request';
import { ElMessage } from 'element-plus';
import { defineProps, onBeforeMount, reactive,ref ,computed} from 'vue'


//获取所有的实验室管理员
let LaboratoryAdmain=reactive([
]);
//搜索
let searchStr=ref('')
const filterTableData = computed(() =>
LaboratoryAdmain.filter(
    (data) =>
      !searchStr.value ||
      data.name.toLowerCase().includes(searchStr.value.toLowerCase())
  )
)


//获取楼栋数据

let BuildingData =reactive([]);
let myCurrentBuilding=ref('查找中');


//当前楼层数据
let myCurrentFloor=ref('无数据');
//所有楼层数据
let tableData = reactive([]);

//写到这儿了-----------------------------------要加用户列表
//用户提交数据
let AddLaboratory=reactive({
    id:1,
    name:'',
    number:'',
    floorId:0,
    userId:0
})

async function myclose()
{

    //清空数据
    // 重置数据
    AddLaboratory.name = '';
    AddLaboratory.number = '';
    AddLaboratory.floorId = 0;
    AddLaboratory.userId = 0;

    //关闭页面
    props.Close();
}

//获取所有楼栋方法
async function getDataList() {
    let resultData = []
    
    //获取所有的实验室管理员
    service.get("/User/getUser").then(
        async (res) => {
            LaboratoryAdmain.push(...res.value)
            if(BuildingData.length > 0){
                myCurrentBuilding.value=BuildingData[0].name;
            }
            
        }
    )


    //楼栋数据请求
    service.get("/Building/getAllBuilding").then(
        async (res) => {
            BuildingData.push(...res.value)
            if(BuildingData.length > 0){
                myCurrentBuilding.value=BuildingData[0].name;
            }
            
        }
    )

    //获取第一栋教学楼楼层
    await service.get("/Floor/getAllFloor?buildingId="+1).then(
                (res) => {
                    resultData.push(...res.value)

                })

    if(resultData[0]!=null)
    {

        //第一次进入的默认楼层
        AddLaboratory.floorId=resultData[0].id;

        myCurrentFloor.value=resultData[0].name;
    }
    else
    {
        myCurrentFloor.value='无数据';

        
        AddLaboratory.floorId=0;
    }
    return resultData
}

//更改楼栋
async function changeBuilding(id,name){
    myCurrentBuilding.value=name;
    

    //获取选择的教学楼楼层
    await service.get("/Floor/getAllFloor?buildingId="+id).then(
                (res) => {
                    // 清空 tableData
                    tableData.length = 0;
                    tableData.push(...res.value)
                })

    if(tableData[0]!=null)
    {
        //改变楼栋的默认楼层
        AddLaboratory.floorId=tableData[0].id;
        myCurrentFloor.value=tableData[0].name;
   
    }
    else
    {
        AddLaboratory.floorId=0;
        myCurrentFloor.value='无数据';
    }
}


//更改楼 层
async function changeFloor(id,name){
    myCurrentFloor.value=name;
    //改变楼层的存入id
    AddLaboratory.floorId=id;

}

//点击选择用户的事件
async function ClickEdit(index,row)
{
    AddLaboratory.userId = row.id; // 设置选中行的用户 ID

}

// #region 显示提示
async function ShowTip(isSuccess, msg) {
    if (isSuccess == true) {
        ElMessage({ message: msg, type: 'success' })
    }
    else {
        ElMessage({ message: msg, type: 'error' })
    }
}
//#endregion

//控制是否打开楼栋列表
let dialogVisible = ref(false)

//传入行参数
let props = defineProps(["Close", "transmitObj","isAdd"])


let formData = reactive
({
    id: 0,
    name: '',
    state:false
})


async function SubmitForm() {
    if (AddLaboratory.name == ''||AddLaboratory.number=='') {
        ShowTip(false,'请先完成必要步骤')
        return
    }

    //添加
    if (props.isAdd==1) {
        console.log('添加教室');
            await service.post(`/Laboratory/addLaboratory`,AddLaboratory).then(
                async res => {
                    ShowTip(true,"操作成功")
                },
                error => {
                    ShowTip(false,error)
                }
            )
    }
    //编辑
    else {

        await service.post("/Laboratory/updateLaboratory",AddLaboratory).then(
            async res => {
                ShowTip(true,"操作成功")
            },
            error => {
                ShowTip(false,error)
            }
        )
    }
    await props.Close()
}

async function Reload(){
   await getDataList();

}

onBeforeMount(async () => {
    await Reload()
    //如果是编辑操作就初始化
    if (props.transmitObj != null) {
        for (var p in props.transmitObj) {
            formData[p] = props.transmitObj[p]
        }
    }

    //说明是增加楼层
    if (props.isAdd == 1)
    {
        dialogVisible.value=true;
    }
    else
    {

        console.log(props.transmitObj);

        AddLaboratory.name=props.transmitObj.row.name;
        AddLaboratory.number=props.transmitObj.row.nubmer;
        AddLaboratory.floorId=props.transmitObj.floorId;
        AddLaboratory.id=props.transmitObj.row.id;

        //将页面传入的楼栋楼层Id赋值
        myCurrentBuilding.value= props.transmitObj.building;
        myCurrentFloor.value=props.transmitObj.floor;

        console.log(".............");
        console.log(props.transmitObj.row.id)
        console.log(AddLaboratory)
    }
})
</script>

<style scoped>
</style>